<!--单纯显示拿到markdown富文本-->
<style>
    * {
        padding: 0;
        margin: 0;
    }

    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        margin: 0;
        padding: 0;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
        display: block;
    }

    audio, canvas, video {
        display: inline-block;
    }

    img {
        border: none;
        vertical-align: middle;
    }

    ul, ol {
        /*list-style: none;*/
    }

    .clear {
        *zoom: 1; /* for IE 6/7 */
    }

    .clear:before, .clear:after {
        height: 0;
        content: "";
        font-size: 0;
        display: table;
        line-height: 0; /* for Opera */
        visibility: hidden;
    }

    .clear:after {
        clear: both;
    }


</style>
<style>
    @import "/editor.md-master/css/editormd.preview.css";
</style>
<style>
    html {
        padding: 0px;
        margin: 0px;
    }

    pre {
        background: #f6f6f6;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    #custom-toc-container {
        position: fixed;
        z-index: 999;
        right: 30px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 10px 10px 10px #ddd;
        padding: 10px;
    }

    .markdown-body.editormd-html-preview {
        background: none !important;
    }

</style>

<template>
    <div style="padding: 20px;background: #fcfaf2;">
        <div style="color: #c0c4cc">
            新建时间：{{create_time}}&nbsp;&nbsp;&nbsp;&nbsp;最新跟新时间:{{update_time}}
        </div>
        <div id="custom-toc-container"></div>
        <h1 style="font-size: 37px;border-bottom: 1px solid #ddd;padding-bottom: 10px;">{{title}}</h1>
        <div id="test-editormd-view"></div>
    </div>
</template>
<script>
    import {createA, getUrlParamNative, uuid} from "../../utils/utils";

    function openAlertList(text, uuid) {
        function isInFrame() {
            if (self.frameElement && self.frameElement.tagName == "IFRAME") {
                return true;
            }
        }

        if (isInFrame()) {
            parent.openAlertList(text, uuid)
        } else {
            layer.open({
                type: 2,
                title: `【列表】 like ${text}`,
                shadeClose: false,
                shade: false,
                area: ['380px', '480px'],
                content: `/storyOne?uuid=${uuid}` //iframe的url
            });
        }

    }

    window.openAlertList = openAlertList


    import moment from 'moment'

    export default {
        data() {
            return {
                createA,
                create_time: "",
                update_time: "",
                title: "",
                content: "",
                uuid: "",
            }
        },
        mounted() {
            var _uuid = getUrlParamNative('uuid')
            this.uuid = _uuid
            this.ajaxStoryDetail()
        },
        methods: {
            ajaxStoryDetail() {
                axios.get(`/story/one?uuid=${this.uuid}`).then(res => res.data).then(detail => {
                    this.title = detail.title
                    this.content = detail.content
                    this.create_time = moment(detail.create_time).format('YYYY-MM-DD hh:mm:ss')
                    this.update_time = moment(detail.update_time).format('YYYY-MM-DD hh:mm:ss')

                    this.initEdit()
                    if (this.title) {
                        document.title = this.title
                    }

                })
            },
            initEdit() {
                const editor = editormd.markdownToHTML("test-editormd-view", {
                    markdown: this.content,//+ "\r\n" + $("#append-test").text(),
                    /*  htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                      htmlDecode: "style,script,iframe",  // you can filter tags decode
                      toc: true,
                      tocm: true,    // Using [TOCM]
                      tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
                      // gfm             : false,
                      // tocDropdown     : true,
                      // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                      emoji: true,
                      lineWrapping: false, // 编辑框不换行
                      codeFold: true,
                      taskList: true,
                      tex: true,  // 默认不解析
                      flowChart: true,  // 默认不解析
                      sequenceDiagram: true,  // 默认不解析
                      syncScrolling: true,
                      saveHTMLToTextarea: true,       // 保存 HTML 到 Textarea
                      searchReplace: true,
                      previewCodeHighlight: true,     // 预览 HTML 的代码块高亮，默认开启*/
                    //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启


                    htmlDecode: "style,script,iframe",  // you can filter tags decode
                    tocm: true,    // Using [TOCM]
                    tocContainer: "#custom-toc-container", // 自定义 ToC 容器层
                    //toc             : false,
                    tocm: true,    // Using [TOCM]
                    //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
                    //gfm             : false,
                    //tocDropdown     : true,
                    // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
                    emoji: true,
                    taskList: true,
                    tex: true,  // 默认不解析
                    flowChart: true,  // 默认不解析
                    sequenceDiagram: true,  // 默认不解析

                });
                this.editor = editor;
                //初始化一些点击事件
                setTimeout(() => {
                    this.initEvent()
                }, 444)

            },
            initEvent() {
                $('a').click(e => {
                    var href = $(e.target).attr('href')
                    //疯狂弹出框
                    var wenhaoIndex = href.indexOf('?')
                    href = href.substring(wenhaoIndex, href.length)
                    var _uuid = getUrlParamNative('uuid', href);
                    if (_uuid) {
                        e.stopPropagation()
                        e.preventDefault()
                        openAlertList($(e.target).text(), _uuid)
                    }
                })
            }
        }
    }
</script>